<template>
  <div class="dizhi">
    <header> <span class="iconfont icon-zuojiantou1" @click="fanhui"></span><p>新增</p></header>
   <van-address-edit
  :area-list="areaList"
  show-postal
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
/>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {areaList} from "@vant/area-data"
import {Creatddress}  from "../../api/index"
export default {
  data() {
    return {
      areaList,
      searchResult: [],
    };
  },
  methods: {
    onSave(context) {
      Toast('已保存');
      console.log(context);
         Creatddress({userid:localStorage.getItem("userid"),address:context.addressDetail,phone:context.tel,name:context.name}).then((data)=>{
                console.log(data)
    
          })
    },
    onDelete() {
      Toast('删除');
         Editaddress({userid:localStorage.getItem("userid")}).then((data)=>{
                console.log(data) 
          })
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '陕西立人科技园',
            address: '西安市雁塔区',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
     fanhui(){
            this.$router.go(-1)
       }
 
  },
};
</script>

<style scoped>
.dizhi{
  padding: 10px;
}
header{
  margin-top:20px ;
  padding-left:30px ;
  display: flex;
  background: pink;
}
header span{
  margin: 20px;
}

</style>
